<m-card>
    <ng-container card-head>
        <div class="d-flex align-items-center">
            <div class="g-card-title">新建任务 -- 步骤{{ current + 1 }}：{{steps[current].title }}</div>
        </div>
    </ng-container>

    <div class="row">
        <div class="col-md-4 col-xl-3  border-right">
            <m-wizard-stepper [dataSource]="taskTypeModel == taskType.Client?clientSteps:steps" [(value)]="current"
                (valueChange)="stepperChange($event)">
            </m-wizard-stepper>
        </div>
        <div class="col-md-8 col-xl-9 pl-0">
            <div class="router-outlet">
                <perfect-scrollbar class="flex-full p-3">
                    <form #formRef>
                        <div [hidden]=" current !==0">
                            <div class="task-property-selection">
                                <p>选择任务分类：</p>
                                <mat-radio-group [(ngModel)]="taskTypeModel" name="taskTypeModel"
                                    (change)="clickUpdate()">
                                    <mat-radio-button [value]="taskType.SystemUpgrade">更新系统</mat-radio-button>
                                    <mat-radio-button [value]="taskType.SoftwareUpgrade">更新软件</mat-radio-button>
                                    <mat-radio-button [value]="taskType.Script">下发脚本</mat-radio-button>
                                    <mat-radio-button [value]="taskType.Client">客户端更新</mat-radio-button>

                                    <!-- <mat-radio-button [value]="taskType.Message">下发消息</mat-radio-button> -->
                                </mat-radio-group>
                            </div>

                            <div class="task-property-selection">
                                <p>设置执行时间：</p>
                                <mat-radio-group [(ngModel)]="taskPeriodModel" name="taskPeriodModel">
                                    <mat-radio-button [value]="taskPeriod.Now">立即执行</mat-radio-button>
                                    <mat-radio-button [hidden]='taskTypeModel == taskType.Client'
                                        [value]="taskPeriod.Timing">定时执行</mat-radio-button>
                                    <mat-radio-button [hidden]='taskTypeModel == taskType.Client'
                                        [value]="taskPeriod.Schedule">周期执行</mat-radio-button>
                                </mat-radio-group>
                            </div>

                            <div class="task-property-selection" [hidden]='taskPeriodModel !== taskPeriod.Schedule'>
                                <p>设置执行周期：</p>
                                <div class="date-time">
                                    <m-checkbox [value]="weekdays[0]" (valueChange)="checkWeekday(0,$event)">星期日
                                    </m-checkbox>
                                    <m-checkbox [value]="weekdays[1]" (valueChange)="checkWeekday(1,$event)">星期一
                                    </m-checkbox>
                                    <m-checkbox [value]="weekdays[2]" (valueChange)="checkWeekday(2,$event)">星期二
                                    </m-checkbox>
                                    <m-checkbox [value]="weekdays[3]" (valueChange)="checkWeekday(3,$event)">星期三
                                    </m-checkbox>
                                    <m-checkbox [value]="weekdays[4]" (valueChange)="checkWeekday(4,$event)">星期四
                                    </m-checkbox>
                                    <m-checkbox [value]="weekdays[5]" (valueChange)="checkWeekday(5,$event)">星期五
                                    </m-checkbox>
                                    <m-checkbox [value]="weekdays[6]" (valueChange)="checkWeekday(6,$event)">星期六
                                    </m-checkbox>
                                    <ngb-timepicker [(ngModel)]="taskTime" name="taskTime"></ngb-timepicker>
                                </div>
                            </div>

                            <div class="task-property-selection" [hidden]='taskPeriodModel !== taskPeriod.Timing'>
                                <p>设置执行日期：</p>
                                <div class="date-time">
                                    <div class="form-inline">
                                        <div class="input-group">
                                            <input class="form-control" placeholder="yyyy-mm-dd" name="dp"
                                                [(ngModel)]="taskDateModel" ngbDatepicker #d="ngbDatepicker">
                                            <div class="input-group-append">
                                                <button class="btn btn-primary" (click)="d.toggle()" type="button">
                                                    <i class="la la-calendar"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <ngb-timepicker [(ngModel)]="taskTime" name="taskTime"></ngb-timepicker>
                                </div>
                            </div>

                            <div class="task-property-selection" [hidden]='taskTypeModel!== taskType.Script'>
                                <div class="script-task">
                                    <a>上传执行脚本：</a>
                                    <form [formGroup]="scriptForm">
                                        <m-script-input formGroupName="script"></m-script-input>
                                    </form>
                                </div>
                            </div>

                            <div class="task-property-selection" [hidden]='taskTypeModel!== taskType.Script'>
                                <div class="script-task">
                                    <a>脚本说明：</a>
                                    <textarea class="form-control" [(ngModel)]="scriptDesc" name="scriptDesc"
                                        placeholder="请输入脚本说明,不超过300字" maxlength="300"></textarea>
                                </div>
                            </div>

                        </div>

                        <div [hidden]="current !== 1" class="task-property-selection">
                            <p>选择范围筛选方式</p>
                            <mat-radio-group [(ngModel)]="taskTargetModel" name="taskTargetModel">
                                <mat-radio-button [value]="taskTarget.Zone">按照区域筛选</mat-radio-button>
                                <mat-radio-button [value]="taskTarget.Computer"
                                    [hidden]='taskTypeModel!=taskType.SystemUpgrade && taskTypeModel!=taskType.Script &&taskTypeModel!=taskType.Client'>
                                    按照终端筛选
                                </mat-radio-button>
                                <mat-radio-button [value]="taskTarget.Software"
                                    [hidden]='taskTypeModel!=taskType.SoftwareUpgrade'>
                                    按照软件筛选
                                </mat-radio-button>
                                <mat-radio-button [value]="taskTarget.Personnel"
                                    [hidden]='taskTypeModel!=taskType.Message'>按照人员筛选
                                </mat-radio-button>
                            </mat-radio-group>
                            <!-- [dataHackerShow]="taskTargetModel==taskTarget.Computer" -->
                            <!-- <span style="float: right;
                            display: none;
                            position: absolute;
                            right: 20px;
                            transform: scale(0.8);
                            top: 35px;
                            /* top: -10px;">
                                <button class="btn btn-secondary" data-hacker="{id:addTerminalBtn}">
                                    添加终端    
                                </button>
                            </span> -->
                            <p></p>
                            <m-select-zone [hidden]='taskTargetModel!=taskTarget.Zone'></m-select-zone>
                            <m-step2-select-personnel [hidden]='taskTargetModel!=taskTarget.Computer'>
                            </m-step2-select-personnel>
                            <!-- <m-select-computer [hidden]='taskTargetModel!=taskTarget.Computer'></m-select-computer> -->
                            <m-select-software [hidden]='taskTargetModel!=taskTarget.Software'></m-select-software>
                            <m-select-personnel [hidden]='taskTargetModel!=taskTarget.Personnel'></m-select-personnel>

                        </div>

                        <div [hidden]="current !== 2" class="task-property-selection">
                            <m-step-3></m-step-3>

                        </div>

                        <div [hidden]="current !== 3" class="task-property-selection">
                            <m-step-4></m-step-4>

                        </div>
                    </form>
                </perfect-scrollbar>
                <div class="step-button-group border-top p-3 ">
                    <div>
                        <button class="btn btn-secondary" (click)="current = current - 1" *ngIf="current">
                            上一步
                        </button>
                    </div>
                    <div>
                        <button class="btn btn-primary" (click)="nextStep()"
                            *ngIf="current <steps.length-1; else saveRef">
                            下一步
                        </button>
                        <ng-template #saveRef>
                            <button class="btn btn-primary" (click)="submit()" appNoDblClick>保存</button>
                        </ng-template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</m-card>